import { useState } from 'react';

function Counter(props) {
  const [step, setStep] = useState(1);

  const increment = () => {
    props.increment(step * 1);
  };
  const decrement = () => {
    props.decrement(step * 1);
  };
  const incrementSync = () => {
    props.incrementAsync(step * 1, 500);
  };

  return (
    <>
      <div>
        <h1>Count: {props.count}</h1>
        step:{' '}
        <input
          type="number"
          value={step}
          step={1}
          onChange={e => setStep(e.target.value)}
        />
        <button onClick={increment}>增加</button>
        <button onClick={decrement}>减去</button>
        <button onClick={incrementSync}>异步加</button>
      </div>
    </>
  );
}

export default Counter;
